<template>
    <view>
        <view class="page">
            <view class="sxlb">
                <view @tap="chosetype" class="sxlbv" :style="'color:' + (selecttype ? color : '') + ';border-bottom:' + (selecttype ? 2 : '0') + 'rpx solid ' + color">
                    <view>{{ typename }}</view>
                    <image :class="selecttype ? 'xs' : 'xx'" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/down1.png"></image>
                </view>
                <view @tap="chosedate" class="sxlbv" :style="'color:' + (selectdate ? color : '') + ';border-bottom:' + (selectdate ? 2 : '0') + 'rpx solid ' + color">
                    <view>日期范围</view>
                    <image :class="selectdate ? 'xs' : 'xx'" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/down1.png"></image>
                </view>
                <view :class="'sorting-list ' + (!selecttype ? ' chioce-list-hide' : ' chioce-list-show')">
                    <view @tap="xztype" class="sorting-item" :data-index="index" v-for="(item, index) in datetype" :key="index">{{ item }}</view>
                </view>
                <view :class="'sorting-list ' + (!selectdate ? ' chioce-list-hide' : ' chioce-list-show')">
                    <view class="weui-cell weui-cell_input">
                        <view class="weui-cell__hd">
                            <view class="weui-label">起始日期</view>
                        </view>
                        <view class="weui-cell__bd">
                            <picker @change="bindTimeChange" end="" mode="date" start="" :value="timestart">
                                <view class="weui-input">{{ timestart }}</view>
                            </picker>
                        </view>
                        <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                    </view>
                    <view class="weui-cell weui-cell_input">
                        <view class="weui-cell__hd">
                            <view class="weui-label">结束日期</view>
                        </view>
                        <view class="weui-cell__bd">
                            <picker @change="bindTimeChange1" end="" mode="date" start="" :value="timeend">
                                <view class="weui-input">{{ timeend }}</view>
                            </picker>
                        </view>
                        <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                    </view>
                    <view class="datebtn">
                        <button @tap.stop.prevent="repeat" class="jjjd" :data-id="oitem.order.id">重置</button>
                        <button @tap.stop.prevent="find" :data-id="oitem.order.id" :style="'background:' + color + ';color: #fff;'">查找</button>
                    </view>
                </view>
            </view>
            <view @tap="hidemask" class="mask" v-if="!(!selecttype && !selectdate)"></view>
            <view class="head">
                <view @tap="selectednavbar" class="topnav" :data-index="index" v-for="(item, index) in topnav" :key="index">
                    <view class="topimg" :style="'background:' + (selectedindex == index ? color : '')">
                        <image mode="widthFix" :src="item.img" v-if="selectedindex == index"></image>
                        <image mode="widthFix" :src="item.img1" v-else></image>
                    </view>

                    <view :style="'color:' + (selectedindex == index ? color : '')">{{ item.name }}</view>
                </view>
            </view>
            <view class="main">
                <view class="no-data-tip zwdd" v-if="order_list.length == 0 && mygd">
                    <image mode="aspectFit" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/list.png"></image>
                    <view>您暂无相关订单哦~</view>
                </view>
                <navigator
                    class="weui-cells weui-cells_after-title"
                    hoverClass="none"
                    :style="'filter: ' + (oitem.order.dn_state == 3 ? 'grayscale(100%)' : '') + ';background:' + (oitem.order.dn_state == 3 ? '#EDEDED' : '')"
                    :url="'dnddxq?oid=' + oitem.order.id"
                    v-for="(oitem, oindex) in order_list"
                    :key="oindex"
                >
                    <view class="weui-cell">
                        <view class="weui-cell__hd ddxh" :style="'color:' + color">#{{ oitem.order.id }}</view>
                        <view class="weui-cell__bd">{{ oitem.order.name }}</view>
                        <view class="weui-cell__ft" :style="'color:' + color" v-if="oitem.order.dn_state == '1'">待付款</view>
                        <view class="weui-cell__ft" :style="'color:' + color" v-if="oitem.order.dn_state == '2'">已完成</view>
                        <view class="weui-cell__ft" :style="'color:' + color" v-if="oitem.order.dn_state == '3'">已关闭</view>
                    </view>

                    <view style="font-size: 22rpx; color: #999; padding: 10rpx 30rpx 20rpx">下单时间：{{ oitem.order.time }}</view>

                    <view class="weui-cell bold">
                        <view class="weui-cell__hd">支付方式：</view>
                        <view class="weui-cell__ft" style="color: #66cd00" v-if="oitem.order.pay_type == '1'">微信支付</view>
                        <view class="weui-cell__ft" style="color: #eead0e" v-if="oitem.order.pay_type == '2'">余额支付</view>
                        <view class="weui-cell__ft" style="color: #ff6347" v-if="oitem.order.pay_type == '5'">餐后支付</view>
                    </view>

                    <view @tap.stop.prevent="kindToggle" class="weui-cell" :id="oindex">
                        <view class="weui-cell__hd">商品信息：</view>
                        <view class="weui-cell__bd" style="color: #999; font-size: 22rpx">{{ oitem.good[0].name }}等{{ oitem.num }}件商品</view>
                        <view class="weui-cell__ft">
                            <image :class="oitem.open ? 'xs' : 'xx'" mode="aspectFit" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/down1.png"></image>
                        </view>
                    </view>

                    <view class="weui-cell" v-if="oitem.open" v-for="(item, index) in oitem.good" :key="index">
                        <view class="weui-cell__hd">
                            <image :src="item.img"></image>
                        </view>

                        <view class="weui-cell__bd">{{ item.name }}</view>

                        <view class="weui-cell__ft cpjg">
                            <text>x{{ item.number }}</text>
                            ￥{{ item.money }}
                        </view>
                    </view>

                    <view class="weui-cell" :data-tel="oitem.order.tel">
                        <view class="weui-cell__hd">订单金额：</view>
                        <view class="weui-cell__bd" :style="'color:' + color">{{ oitem.order.money }}元</view>
                    </view>

                    <view class="ddxx">
                        <view class="flex-bet">
                            <view>订单编号：{{ oitem.order.order_num }}</view>
                            <view @tap.stop.prevent="dyxp" class="dyxp" :data-id="oitem.order.id" :style="'color:' + color + ';border-color:' + color + ';margin-right:37rpx;'">
                                打印小票
                            </view>
                        </view>
                        <view v-if="oitem.order.note != ''">备注：{{ oitem.order.note }}</view>
                    </view>

                    <view class="footbtn">
                        <button @tap.stop.prevent="jjjd" class="jjjd" :data-id="oitem.order.id" v-if="oitem.order.dn_state == '1'">关闭订单</button>
                        <button
                            @tap.stop.prevent="wcps"
                            class="djjd"
                            :data-id="oitem.order.id"
                            :style="'background:' + color + ';color: #fff;'"
                            v-if="oitem.order.dn_state == '1' && oitem.order.pay_type == '5'"
                        >
                            确认收款
                        </button>
                    </view>
                </navigator>
                <view class="jzz" v-if="!mygd">
                    <image class="Rotation" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/jzz.png"></image>
                    <view>加载中...</view>
                </view>
                <view class="jzwb" v-if="mygd">
                    <view class="hx"></view>
                    <view class="wz">加载完毕</view>
                    <view class="hx"></view>
                </view>
            </view>
        </view>
        <view class="dbbtn">
            <button @tap.stop.prevent="qkt" :data-id="oitem.order.id" :style="'background:' + color + ';color: #fff;'" v-if="tablestatus == '1'">清台</button>
            <button @tap.stop.prevent="qkt" :data-id="oitem.order.id" :style="'background:' + color + ';color: #fff;'" v-else>开台</button>
        </view>
    </view>
</template>

<script>
import cardlist from '@/ymq_canyino2o/dist/cardlist/index';
import gettel from '@/ymq_canyino2o/dist/gettel/index';
var app = getApp();
var util = require('../../../utils/util.js');
export default {
    components: {
        cardlist,
        gettel
    },
    data() {
        return {
            selectedindex: 0,

            topnav: [
                {
                    img: '../static/icon/dzt.png',
                    img1: '../static/icon/wdzt.png',
                    name: '全部'
                },
                {
                    img: '../static/icon/djd.png',
                    img1: '../static/icon/wdjd.png',
                    name: '待支付'
                },
                {
                    img: '../static/icon/ywc.png',
                    img1: '../static/icon/wywc.png',
                    name: '已完成'
                },
                {
                    img: '../static/icon/sh.png',
                    img1: '../static/icon/wsh.png',
                    name: '已关闭'
                }
            ],

            open: false,
            pagenum: 1,
            order_list: [],
            storelist: [],
            mygd: false,
            jzgd: true,
            selecttype: false,
            typename: '选择类型',
            selectdate: false,
            datetype: ['全部', '今天', '昨天', '近七天', '本月'],
            start: '',
            timestart: '',
            timeend: '',
            start_time: '',
            end_time: '',
            table_id: '',
            tablestatus: '',
            xtxx: '',
            time: '',
            status: 0,
            color: '',

            oitem: {
                order: {
                    id: '',
                    dn_state: 0,
                    name: '',
                    time: '',
                    pay_type: '',
                    tel: '',
                    money: '',
                    order_num: '',
                    note: ''
                },

                good: '',
                num: '',
                open: false
            },

            oindex: 0,
            name: ''
        };
    },
    onLoad: function (t) {
        var that = this;
        var a = uni.getStorageSync('sjdsjid');
        console.log(a, t);
        var s = util.formatTime(new Date()).substring(0, 10).replace(/\//g, '-');
        console.log(s.toString());
        this.setData({
            table_id: t.table_id,
            tablestatus: t.status,
            start: s,
            timestart: s,
            timeend: s
        });
        uni.setNavigationBarTitle({
            title: t.name + '订单'
        });
        this.reLoad();
        app.globalData.setNavigationBarColor(this);
        app.globalData.sjdappPageOnLoad(this);
        app.globalData.util.request({
            url: 'entry/wxapp/system',
            cachetime: '0',
            success: function (t) {
                console.log(t.data);
                uni.setStorageSync('system', t.data);
                that.setData({
                    xtxx: t.data
                });
            }
        });
    },
    onPullDownRefresh: function () {},
    onReachBottom: function () {
        console.log('上拉加载', this.pagenum);
        if (!this.mygd && this.jzgd) {
            this.setData({
                jzgd: false
            });
            this.reLoad();
        }
    },
    methods: {
        hidemask: function () {
            this.setData({
                selecttype: false,
                selectdate: false
            });
        },

        chosetype: function () {
            this.setData({
                selecttype: !this.selecttype,
                selectdate: false
            });
        },

        xztype: function (t) {
            var e;
            var a = t.currentTarget.dataset.index;
            console.log(a);
            if (0 == a) {
                e = '';
            }
            if (1 == a) {
                e = 'today';
            }
            if (2 == a) {
                e = 'yesterday';
            }
            if (3 == a) {
                e = 'week';
            }
            if (4 == a) {
                e = 'month';
            }
            this.setData({
                typename: this.datetype[a],
                selecttype: false,
                time: e,
                start_time: '',
                end_time: '',
                pagenum: 1,
                order_list: [],
                storelist: [],
                mygd: false,
                jzgd: true,
                selectedindex: 0,
                status: 1
            });
            this.reLoad();
        },

        bindTimeChange: function (t) {
            console.log('picker 发生选择改变，携带值为', t.detail.value);
            this.setData({
                timestart: t.detail.value
            });
        },

        bindTimeChange1: function (t) {
            console.log('picker  发生选择改变，携带值为', t.detail.value);
            this.setData({
                timeend: t.detail.value
            });
        },

        find: function () {
            var t = this.timestart;
            var e = this.timeend;
            console.log(util.validTime(t, e));
            if (util.validTime(t, e)) {
                this.setData({
                    typename: this.datetype[0],
                    time: '',
                    pagenum: 1,
                    order_list: [],
                    storelist: [],
                    mygd: false,
                    jzgd: true,
                    selectedindex: 0,
                    status: 1,
                    start_time: t,
                    end_time: e,
                    selectdate: false
                });
                this.reLoad();
            } else {
                uni.showModal({
                    title: '提示',
                    content: '请选择正确的日期范围'
                });
            }
        },

        repeat: function () {
            var t = this.start;
            console.log(t);
            this.setData({
                typename: this.datetype[0],
                time: '',
                pagenum: 1,
                order_list: [],
                storelist: [],
                mygd: false,
                jzgd: true,
                selectedindex: 0,
                status: 1,
                timestart: t,
                timeend: t,
                start_time: '',
                end_time: '',
                selectdate: false
            });
            this.reLoad();
        },

        chosedate: function () {
            this.setData({
                selectdate: !this.selectdate,
                selecttype: false
            });
        },

        maketel: function (t) {
            var e = t.currentTarget.dataset.tel;
            uni.makePhoneCall({
                phoneNumber: e
            });
        },

        location: function (t) {
            var e = t.currentTarget.dataset.lat;
            var a = t.currentTarget.dataset.lng;
            var s = t.currentTarget.dataset.address;
            console.log(e, a);
            uni.openLocation({
                latitude: parseFloat(e),
                longitude: parseFloat(a),
                address: s,
                name: '位置'
            });
        },

        selectednavbar: function (t) {
            console.log(t);
            this.setData({
                pagenum: 1,
                order_list: [],
                storelist: [],
                mygd: false,
                jzgd: true,
                selectedindex: t.currentTarget.dataset.index,
                status: Number(t.currentTarget.dataset.index) + 1
            });
            this.reLoad();
        },

        doreload: function (t) {
            console.log(t);
            this.setData({
                pagenum: 1,
                order_list: [],
                storelist: [],
                mygd: false,
                jzgd: true,
                selectedindex: t - 1,
                status: t
            });
            this.reLoad();
        },

        kindToggle: function (t) {
            var e = t.currentTarget.id;
            var a = this.order_list;
            console.log(e);
            for (var s = 0, i = a.length; s < i; ++s) {
                a[s].open = s == e && !a[s].open;
            }
            this.setData({
                order_list: a
            });
        },

        reLoad: function () {
            var t;
            var that = this;
            var e = this.table_id;
            var s = this.status || 1;
            var i = this.time || '';
            var n = uni.getStorageSync('sjdsjid');
            var o = this.pagenum;
            var d = this.start_time;
            var c = this.end_time;
            if (1 == s) {
                t = '1,2,3';
            }
            if (2 == s) {
                t = '1';
            }
            if (3 == s) {
                t = '2';
            }
            if (4 == s) {
                t = '3';
            }
            console.log(s, t, i, d, c, n, o, e);
            app.globalData.util.request({
                url: 'entry/wxapp/StoreDnOrder',
                cachetime: '0',
                data: {
                    dn_state: t,
                    time: i,
                    start_time: d,
                    end_time: c,
                    table_id: e,
                    store_id: n,
                    page: o,
                    pagesize: 10
                },
                success: function (t) {
                    console.log('分页返回的列表数据', t.data);
                    if (t.data.length < 10) {
                        that.setData({
                            mygd: true,
                            jzgd: true
                        });
                    } else {
                        that.setData({
                            jzgd: true,
                            pagenum: that.pagenum + 1
                        });
                    }
                    var e = that.storelist;
                    e = (function (t) {
                        for (var e = [], a = 0; a < t.length; a++) {
                            if (-1 == e.indexOf(t[a])) {
                                e.push(t[a]);
                            }
                        }
                        return e;
                    })((e = e.concat(t.data)));
                    that.setData({
                        order_list: e,
                        storelist: e
                    });
                    console.log(e);
                }
            });
        },

        smhx: function (t) {
            var a = uni.getStorageSync('sjdsjid');
            uni.scanCode({
                success: function (t) {
                    console.log(t);
                    var e = '/' + t.path;
                    uni.navigateTo({
                        url: e + '&storeid=' + a
                    });
                },
                fail: function (t) {
                    console.log('扫码fail');
                }
            });
        },

        qkt: function (t) {
            var that = this;
            var a = this.table_id;
            console.log(a);
            uni.showModal({
                title: '提示',
                content: '确认进行此操作？',
                cancelText: '否',
                confirmText: '是',
                success: function (t) {
                    if (t.cancel) {
                        return true;
                    }
                    if (t.confirm) {
                        uni.showLoading({
                            title: '操作中',
                            mask: true
                        });
                        app.globalData.util.request({
                            url: 'entry/wxapp/DnOpen',
                            cachetime: '0',
                            data: {
                                table_id: a,
                                status: 1 == that.tablestatus ? 0 : 1
                            },
                            success: function (t) {
                                console.log(t.data);
                                if ('1' == t.data) {
                                    uni.showToast({
                                        title: '操作成功',
                                        icon: 'success',
                                        duration: 1000
                                    });
                                    var e = getCurrentPages();
                                    console.log(e);
                                    if (1 < e.length) {
                                        var a = e[e.length - 2];
                                        a.setData({
                                            pagenum: 1,
                                            order_list: [],
                                            storelist: []
                                        });
                                        a.reLoad();
                                    }
                                    setTimeout(function () {
                                        uni.navigateBack({});
                                    }, 1000);
                                } else {
                                    uni.showToast({
                                        title: '请重试',
                                        icon: 'loading',
                                        duration: 1000
                                    });
                                }
                            }
                        });
                    }
                }
            });
        },

        dyxp: function (t) {
            var e = t.currentTarget.dataset.id;
            console.log(e);
            uni.showModal({
                title: '提示',
                content: '是否确认打印此订单小票？',
                cancelText: '否',
                confirmText: '是',
                success: function (t) {
                    if (t.cancel) {
                        return true;
                    }
                    if (t.confirm) {
                        uni.showLoading({
                            title: '操作中',
                            mask: true
                        });
                        app.globalData.util.request({
                            url: 'entry/wxapp/QtPrint',
                            cachetime: '0',
                            data: {
                                order_id: e,
                                type: 1
                            },
                            success: function (t) {
                                console.log(t.data);
                                uni.showToast({
                                    title: '操作成功',
                                    icon: 'success',
                                    duration: 1000
                                });
                            }
                        });
                    }
                }
            });
        },

        jjjd: function (t) {
            var that = this;
            var a = t.currentTarget.dataset.id;
            console.log(a);
            uni.showModal({
                title: '提示',
                content: '是否关闭订单？',
                cancelText: '否',
                confirmText: '是',
                success: function (t) {
                    if (t.cancel) {
                        return true;
                    }
                    if (t.confirm) {
                        uni.showLoading({
                            title: '操作中',
                            mask: true
                        });
                        app.globalData.util.request({
                            url: 'entry/wxapp/DnClose',
                            cachetime: '0',
                            data: {
                                order_id: a
                            },
                            success: function (t) {
                                console.log(t.data);
                                if ('1' == t.data) {
                                    uni.showToast({
                                        title: '操作成功',
                                        icon: 'success',
                                        duration: 1000
                                    });
                                    setTimeout(function () {
                                        that.doreload(4);
                                    }, 1000);
                                } else {
                                    uni.showToast({
                                        title: '请重试',
                                        icon: 'loading',
                                        duration: 1000
                                    });
                                }
                            }
                        });
                    }
                }
            });
        },

        wcps: function (t) {
            var that = this;
            var a = t.currentTarget.dataset.id;
            console.log(a);
            uni.showModal({
                title: '提示',
                content: '确认完成此订单？',
                cancelText: '否',
                confirmText: '是',
                success: function (t) {
                    if (t.cancel) {
                        return true;
                    }
                    if (t.confirm) {
                        uni.showLoading({
                            title: '操作中',
                            mask: true
                        });
                        app.globalData.util.request({
                            url: 'entry/wxapp/DnReceivables',
                            cachetime: '0',
                            data: {
                                order_id: a
                            },
                            success: function (t) {
                                console.log(t.data);
                                if ('1' == t.data) {
                                    uni.showToast({
                                        title: '操作成功',
                                        icon: 'success',
                                        duration: 1000
                                    });
                                    setTimeout(function () {
                                        that.doreload(3);
                                    }, 1000);
                                } else {
                                    uni.showToast({
                                        title: '请重试',
                                        icon: 'loading',
                                        duration: 1000
                                    });
                                }
                            }
                        });
                    }
                }
            });
        }
    }
};
</script>
<style>
@import './dnddlb.css';
</style>
<style lang="scss" scoped>
	.topnav {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>